<template>
  <view class="vip-container">
    <!-- 顶部导航 -->
    <view class="vip-header">
      <uni-icons type="arrowleft" size="24" color="#333" @click="goBack"></uni-icons>
      <text class="header-title">权益卡</text>
      <view class="header-actions">
        <uni-icons type="more" size="24" color="#666"></uni-icons>
        <uni-icons type="minus" size="24" color="#666" style="margin-left: 15rpx;"></uni-icons>
      </view>
    </view>

    <!-- 权益卡主体 -->
    <view class="vip-card">
      <view class="card-bg">
        <image src="https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=" mode="aspectFill" class="card-image"></image>
      </view>
      <view class="card-content">
        <text class="brand-name">DIYOUNG·DIANA</text>
        <text class="card-name">大王卡2025</text>
        <text class="card-expire">有效期：365天</text>
        <text class="card-tag">大王卡 PLUS</text>
        <text class="card-benefits">8大权益 一卡尊享</text>
      </view>
    </view>

    <!-- 权益详情 -->
    <view class="benefits-section">
      <view class="section-title">专属特权</view>

      <view class="benefits-grid">
        <view class="benefit-item">
          <uni-icons type="truck" size="30" color="#e54d42"></uni-icons>
          <text class="benefit-name">包邮</text>
          <text class="benefit-desc">全场满￥0免邮</text>
        </view>

        <view class="benefit-item">
          <uni-icons type="discount" size="30" color="#e54d42"></uni-icons>
          <text class="benefit-name">会员价活动</text>
          <text class="benefit-desc">专属商品特惠</text>
        </view>

        <view class="benefit-item">
          <uni-icons type="gift" size="30" color="#e54d42"></uni-icons>
          <text class="benefit-name">生日礼包</text>
          <text class="benefit-desc">专属生日礼物</text>
        </view>

        <view class="benefit-item">
          <uni-icons type="medal" size="30" color="#e54d42"></uni-icons>
          <text class="benefit-name">尊享服务</text>
          <text class="benefit-desc">优先技术支持</text>
        </view>
      </view>
    </view>

    <!-- 使用须知 -->
    <view class="notice-section">
      <view class="notice-header">
        <text class="notice-title">①使用须知</text>
        <view class="shop-link">
          <text class="shop-text">店铺主页</text>
          <text class="shop-subtext">进店逛逛</text>
        </view>
      </view>

      <view class="notice-content">
        <text class="notice-item">· 本权益卡自开通之日起365天内有效</text>
        <text class="notice-item">· 享受平台所有VIP专属特权和优惠</text>
        <text class="notice-item">· 可在个人中心随时查看剩余期限</text>
        <text class="notice-item">· 特惠商品不可与其他优惠叠加使用</text>
        <text class="notice-item">· 本活动最终解释权归平台所有</text>
      </view>
    </view>

    <!-- 精选商品 -->
    <view class="featured-products">
      <view class="section-header">
        <text class="section-title">更多精选商品</text>
      </view>

      <view class="product-list">
        <view class="product-item">
          <image src="https://s1.aigei.com/prevfiles/fe0c75404d6b4776aa95df8f2fa876d7.png?e=2051020800&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:c8p1DpbBA8zmuDJPShjFAbE6gQk=" mode="aspectFit" class="product-image"></image>
          <view class="product-info">
            <text class="product-brand">DIYOUNG</text>
            <text class="product-sub">漾粉福利社</text>
            <text class="product-name">速干王胶水</text>
            <text class="product-desc">【MINI装 2g】</text>
          </view>
          <view class="product-tag">
            <text class="tag-text">经典</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="action-footer">
      <label class="agreement">
        <checkbox :checked="agreed" @click="agreed = !agreed" color="#e54d42"/>
        <text class="agreement-text">已阅读并同意<text class="agreement-link">《权益卡使用协议》</text></text>
      </label>

      <view class="payment-action">
        <text class="original-price">原价：¥599</text>
        <view class="price-box">
          <text class="discount-tag">限时特惠</text>
          <text class="price">￥399</text>
        </view>
        <button class="subscribe-btn" :disabled="!agreed">立即开通</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const agreed = ref(false);

const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.vip-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.vip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;

  .header-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #333;
  }

  .header-actions {
    display: flex;
    align-items: center;
  }
}

.vip-card {
  position: relative;
  height: 320rpx;
  margin: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(229, 77, 66, 0.15);

  .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ff9d6c, #e54d42);
    z-index: 1;

    .card-image {
      width: 100%;
      height: 100%;
      opacity: 0.9;
    }
  }

  .card-content {
    position: relative;
    z-index: 2;
    padding: 40rpx;
    color: white;
    display: flex;
    flex-direction: column;

    .brand-name {
      font-size: 30rpx;
      font-weight: 500;
      margin-bottom: 10rpx;
    }

    .card-name {
      font-size: 40rpx;
      font-weight: 700;
      margin-bottom: 8rpx;
      letter-spacing: 2rpx;
    }

    .card-expire {
      font-size: 24rpx;
      opacity: 0.9;
      margin-bottom: 30rpx;
    }

    .card-tag {
      position: absolute;
      top: 40rpx;
      right: 40rpx;
      background-color: rgba(255, 255, 255, 0.15);
      padding: 6rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
    }

    .card-benefits {
      font-size: 30rpx;
      font-weight: 500;
      letter-spacing: 1rpx;
    }
  }
}

.benefits-section {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 40rpx 30rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
    color: #333;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 36rpx;
      background-color: #e54d42;
      border-radius: 4rpx;
    }
  }

  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
  }

  .benefit-item {
    background-color: #fcf7f7;
    border-radius: 16rpx;
    padding: 25rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1rpx solid #ffeceb;

    .benefit-name {
      font-size: 28rpx;
      font-weight: 500;
      margin: 15rpx 0 8rpx;
    }

    .benefit-desc {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.notice-section {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 30rpx;

  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    margin-bottom: 25rpx;

    .notice-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #e54d42;
    }

    .shop-link {
      display: flex;
      align-items: center;

      .shop-text {
        font-size: 26rpx;
        font-weight: 500;
      }

      .shop-subtext {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
  }

  .notice-content {
    display: flex;
    flex-direction: column;
    gap: 15rpx;

    .notice-item {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.featured-products {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 30rpx;

  .section-header {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      position: relative;
      padding-left: 20rpx;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 36rpx;
        background-color: #e54d42;
        border-radius: 4rpx;
      }
    }
  }

  .product-list {
    .product-item {
      display: flex;
      align-items: center;
      background-color: #fcf7f7;
      border-radius: 16rpx;
      padding: 20rpx;
      position: relative;

      .product-image {
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;
      }

      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .product-brand {
          font-size: 26rpx;
          font-weight: 500;
        }

        .product-sub {
          font-size: 24rpx;
          color: #999;
          margin: 5rpx 0;
        }

        .product-name {
          font-size: 28rpx;
          font-weight: 600;
          margin-bottom: 5rpx;
        }

        .product-desc {
          font-size: 24rpx;
          color: #666;
        }
      }

      .product-tag {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        background-color: #e54d42;
        color: white;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
        font-weight: 500;
      }
    }
  }
}

.action-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);

  .agreement {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .agreement-text {
      font-size: 26rpx;
      color: #666;
      margin-left: 10rpx;

      .agreement-link {
        color: #e54d42;
      }
    }
  }

  .payment-action {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .original-price {
      font-size: 26rpx;
      color: #999;
      text-decoration: line-through;
    }

    .price-box {
      display: flex;
      align-items: baseline;
      gap: 10rpx;

      .discount-tag {
        background-color: #fff4f3;
        color: #e54d42;
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        font-size: 22rpx;
      }

      .price {
        font-size: 42rpx;
        font-weight: bold;
        color: #e54d42;
      }
    }

    .subscribe-btn {
      background: linear-gradient(90deg, #e54d42, #ff6b6b);
      color: white;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      font-weight: 500;
      padding: 0 60rpx;
      border: none;
      box-shadow: 0 4rpx 12rpx rgba(229, 77, 66, 0.3);

      &:disabled {
        background: #ccc;
        box-shadow: none;
      }
    }
  }
}
</style>